<template>
  <div class="purchase">
    <div class="purchase-header border-bottom">
      <div class="back-icon" @click="goBack">
        <i class="el-icon-arrow-left">返回</i>
      </div>
      <div class="purchase-title">
        <p>订单确认</p>
      </div>
    </div>
    <div class="content-box">
      <div class="address-wrapper border">
        <div class="address-text border-bottom">
          <span>配送地址</span>
        </div>
        <div class="address-box">
          <p>2栋男生宿舍 C605</p>
          <span>狗剩先生</span>
          <span> 18577995017</span>
        </div>
      </div>
      <div class="goods-confirm">
        <div class="confirm-text border-bottom">
          <span>商品信息</span>
        </div>
        <div class="confirm-box border-bottom">
          <div class="goods-img">
            <img src="@/assets/styles/image/book/cet.jpg"  alt="">
          </div>
          <div class="goods-name">
            <span>星火高等数学 同济七版上册下册 无损好书</span>
            <p>大一下册</p>
          </div>
        </div>
        <div class="goods-details">
          <div class="goods goods-account">
            <span>x</span>
            <span>1</span>
          </div>
          <div class="goods goods-curprice">
            <span>￥</span>
            <span>6</span>
          </div>
        </div>
      </div>
    </div>
    <div class="purchase-footer border-top">
      <div class="total">
        <span>合计￥</span>
        <span>6</span>
      </div>
      <div class="sub-btn">
        <span>提交订单</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Purchase",
    data () {
      return {}
    },
    methods: {
      goBack ()  {
        this.$router.go(-1);
      }
    }
  }
</script>

<style lang="stylus" scoped>
  /* header */
  .purchase-header {
    width: 100%;
    height: 50px;
    background: #fff;
  }
  .purchase-title,.back-icon {
    float: left;
    color: #666;
    text-align: center;
  }
  .back-icon {
    width: 20%;
    line-height: 50px;
    z-index: 2;
    color: #1989fa;
    font-size: 16px;
  }
  .purchase-title {
    width: 60%;
    line-height: 50px;
    font-size: 18px;
  }
  .purchase-title p {
    margin: 0;
  }
  /* 地址栏 */
  .content-box {
    padding: 0 15px;
  }
  .address-text, .confirm-text {
    padding: 10px 12px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    font-family: sans-serif;
  }
  .address-text span, .confirm-text span{
    padding-left: 10px;
    border-left: 2px solid #ff3a3a;
  }
  .confirm-text span {
    border-color: #2f8bdf;
  }
  .address-wrapper, .goods-confirm {
    margin-top: 20px;
    box-shadow: 0 0 10px #e5e5e5;
  }
  .address-wrapper:before, .goods-confirm:before {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .address-box {
    padding: 0 12px 10px;
  }
  .address-box p {
    margin: 0px;
    padding: 10px 0;
    font-size: 20px;
    font-family: sans-serif;
    font-weight: 500;
    color: #222;
  }
  .address-box span {
    color: #848484;
    font-size: 14px;
    font-weight: 400;
    font-family: sans-serif;
  }
  .confirm-box {
    display: flex;
    padding: 10px 12px;
  }
  .goods-img {
    flex: 1;
  }
  .goods-name {
    flex: 4;
    margin:0 5px;
  }
  .goods-name span {
    font-size: 14px;
    color: #333;
    font-weight: 600;
    font-family: sans-serif;
  }
  .goods-name p {
    margin: 0;
    font-size: 12px;
    color: #666;
    font-weight: 100;
    font-family: sans-serif;
    padding: 5px 0;
  }
  .goods-img img {
    width: 100%;
  }
  .goods-details {
    display: flex;
  }
  .goods {
    flex: 1;
    text-align: right;
    padding: 8px 10px;
  }
  .goods span:first-child {
    color: #666;
    font-size: 12px;
    font-family:sans-serif;
    font-weight:400;
  }
  .goods span:last-child {
    color: #333;
    font-size: 16px;
    font-family:sans-serif;
    font-weight:500;
  }
  .goods-curprice span:last-child{
    padding-right: 10px;
    color: #ff3a3a;
  }
  /* footer */
  .purchase-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
  }
  .total {
    flex: 3;
    text-align: right;
    padding: 15px 10px;
    background: #3a3a3a;
    color: #fff;
  }
  .total span:first-child {
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
  }
  .total span:last-child {
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 500;
  }
  .sub-btn {
    flex: 1;
    padding: 15px 0;
    text-align: center;
    background: gold;
    color: #3a3a3a;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 600;
    line-height: 18px;
  }
</style>
